<template>
  <div class="container_hori content">
    <div class="left container_vert_divide3">
      <Box title="驾驶急加速TOP5">
        <ListInfo :data="speedUp" :width-array="widthArray"/>
      </Box>
      <Box title="驾驶急刹车TOP5">
        <ListInfo :data="brake" :width-array="widthArray"/>
      </Box>
      <Box title="驾驶急转弯TOP5">
        <ListInfo :data="turn" :width-array="widthArray"/>
      </Box>
    </div>
    <div class="right container_vert">
      <div class="right_top container_hori_divide3">
        <Box title="行驶时间统计">
          <BarChart :data="travelTimeBar.data" :color-array="travelTimeBar.colorArray" />
        </Box>
        <Box title="行驶速度统计">
          <BarChart :data="travelSpeedBar.data" :color-array="travelSpeedBar.colorArray" />
        </Box>
        <Box title="行驶距离统计">
          <BarChart :data="travelDistanceBar.data" :color-array="travelDistanceBar.colorArray" />
        </Box>
      </div>
      <div class="right_bottom container_hori_divide3">
        <Box title="驾驶时间TOP10">
          <ListInfo :data="travelTimeList" :width-array="widthArray"/>
        </Box>
        <Box title="行驶速度TOP10">
          <ListInfo :data="travelSpeedList" :width-array="widthArray"/>
        </Box>
        <Box title="行驶距离TOP10">
          <ListInfo :data="travelDistanceList" :width-array="widthArray"/>
        </Box>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, inject } from 'vue';
import Box from '@/components/Box.vue';
import ListInfo from '@/components/ListInfo.vue';
import BarChart from '@/components/BarChart.vue';
import { getYesterdayDateStr } from '@/utils/util';
import { accTop, brakeTop, wheelTop, timeTop, speedTop, distanceTop, time, speed, distance } from '@/api/car';
//事件总线
const EventBus = inject('EventBus');
//默认请求日期昨日
const yesterdayStr = getYesterdayDateStr();
//请求时间参数
const queryTime = ref({
  startTime: yesterdayStr + ' 00:00:00',
  endTime: yesterdayStr + ' 23:59:59'
});
//监听请求时间变化
EventBus.on('timequery', ({ startTime, endTime }) => {
  queryTime.value.startTime = startTime;
  queryTime.value.endTime = endTime;
  getChartData(queryTime.value);
});

const widthArray = ref(['20%', '60%', '20%'])
//通行时间柱状图
const travelTimeBar = ref({
  data: [],
  colorArray: {
    top: ['rgba(52, 195, 225, 1)', 'rgba(20, 163, 193, 1)'],
    center: ['rgba(52, 195, 225, 1)', 'rgba(78, 206, 233, 1)', 'rgba(109, 218, 242, 1)'],
    bottom: 'rgba(99, 208, 230, 1)'
  }
});
//通行速度柱状图
const travelSpeedBar = ref({
  data: [],
  colorArray: {
    top: ['rgba(0, 190, 255, 1)', 'rgba(6, 153, 204, 1)'],
    center: ['rgba(0, 190, 255, 1)', 'rgba(86, 209, 251, 1)', 'rgba(177, 217, 255, 1)'],
    bottom: 'rgba(68, 198, 243, 1)'
  }
});
//通行距离柱状图
const travelDistanceBar = ref({
  data: [],
  colorArray: {
    top: ['rgba(17, 155, 254, 1)', 'rgba(6, 131, 220, 1)'],
    center: ['rgba(17, 155, 254, 1)', 'rgba(104, 190, 253, 1)', 'rgba(202, 230, 251, 1)'],
    bottom: 'rgba(149, 207, 248, 1)'
  }
});
//通行时间TOP10
const travelTimeList = ref([]);
//通行速度TOP10
const travelSpeedList = ref([]);
//通行距离TOP10
const travelDistanceList = ref([]);
//急加速TOP5
const speedUp = ref([]);
//急减速TOP5
const brake = ref([]);
//急转弯TOP5
const turn = ref([]);
/**请求图表数据 */
const getChartData = () => {
  const requestData = queryTime.value;
  accTop(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      speedUp.value = data.map(item =>{
        item.value = item.value + '次';
        return item
      }).reverse();
    }
  });
  brakeTop(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      brake.value = data.map(item =>{
        item.value = item.value + '次';
        return item
      }).reverse();
    }
  });
  wheelTop(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      turn.value = data.map(item =>{
        item.value = item.value + '次';
        return item
      }).reverse();
    }
  });
  timeTop(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      travelTimeList.value = data.map(item =>{
        let value = item.value;
        let hour = Math.floor(value/60);
        let min = value%60;
        item.value = hour+'小时'+min+'分';
        return item;
      }).reverse();
    }
  });
  speedTop(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      travelSpeedList.value = data.map(item =>{
        item.value = item.value + 'km/h';
        return item;
      }).reverse();
    }
  });
  distanceTop(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      travelDistanceList.value = data.map(item => {
        item.value = item.value + 'km';
        return item;
      }).reverse();
    }
  });
  time(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      travelTimeBar.value.data = data.map(({ range, value }) => {
        return {
          name: range,
          value
        };
      });
    }
  });
  speed(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      travelSpeedBar.value.data = data.map(({ range, value }) => {
        return {
          name: range,
          value
        };
      });
    }
  });
  distance(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      travelDistanceBar.value.data = data.map(({ range, value }) => {
        return {
          name: range,
          value
        };
      });
    }
  });
};

getChartData();
</script>
<style lang="less" scoped>
.left {
  width: 24.5%;
  height: 100%;
}

.right {
  width: 75.5%;
  height: 100%;
}

.right_top {
  width: 100%;
  height: calc((100% - var(--vMargin)) * 0.425);
}

.right_bottom {
  width: 100%;
  height: calc((100% - var(--vMargin)) * 0.575);
}
</style>
